<template>
	<view>
		<!-- 中间按钮弹窗 -->
		<u-popup border-radius="30" mode="bottom" v-model="showPopup" @close="onClose">
			<view class="handle-wrap">
				<view @click="handleJump(item)" class="item" v-for="(item, index) in popup" :key="index">
					<image mode="widthFix" class="icon" :src="item.icon"></image>
					<text class="txt">{{ item.text }}</text>
				</view>
			</view>
			<view class="handle-close">
				<u-icon @click="onClose" size="40rpx" name="close"></u-icon>
			</view>
		</u-popup>
		<u-tabbar :list="list" :mid-button="true" icon-size="35" mid-button-size="120" inactiveColor="#909399"
			activeColor="#4094ff" @change="changeTabbar"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				popup: [{
						icon: '/static/platform/icons/h_1.png',
						text: '发动态',
						url: '/pages/platform/post/post-add'
					},
					// {
					// 	icon: '/static/h_3.png',
					// 	text: '求帮忙',
					// 	url: '/pages/post/add?class_id=1'
					// },
					// {
					// 	icon: '/static/h_4.png',
					// 	text: '发闲置',
					// 	url: '/pages/goods/add'
					// }
				],
				showPopup: false,
				notificationQueryParam: {
					regionId: undefined
				},
				chooseTabbarIndex: 0,
			};
		},
		created() {
			this.list = this.vuex_tabbar
			uni.$on('tabbarSubscript', (res) => {
				if (res.type === 'notification') {
					this.setTabbarSubscript(1, this.list[1].count + 1)
				} else if (res.type === "0") {
					this.setTabbarSubscript(3, this.list[3].count + 1)
				}
			})
			this.getUnNotificationCount()
		},
		methods: {
			getUnNotificationCount() {
				if (this.$store.state.region) {
					this.notificationQueryParam.regionId = this.$store.state.region.id
				}
				this.$u.api.notificationData.unReadNotificationCount(this.notificationQueryParam)
					.then(res => {
						this.setTabbarSubscript(1, res.data)
					})
			},
			changeTabbar(index) {
				this.chooseTabbarIndex = index
				switch (index) {
					case 1:
						// this.setTabbarSubscript(index, 0)
						break
					case 2:
						this.clickMidButton()
						break
					case 3:
						this.setTabbarSubscript(index, 0)
						break
				}
			},
			//设置角标
			setTabbarSubscript(index, value) {
				this.list[index].count = value
				this.$u.vuex('vuex_tabbar', this.list)
			},
			clickMidButton() {
				if (!this.$store.state.region) {
					uni.showToast({
						title: '请先选择地区',
						icon: 'none'
					})
					// uni.navigateTo({
					// 	url: '/pages/platform/region/choose-region'
					// });
				} else {
					this.showPopup = true
				}

			},
			onClose() {
				this.showPopup = false;
			},
			handleJump(item) {
				this.showPopup = false;
				uni.navigateTo({
					url: item.url
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	// 中间按钮弹出框
	.handle-wrap {
		display: flex;
		padding: 50rpx 0;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex: 1;
			padding: 20rpx 0;
			border-radius: 20rpx;

			.icon {
				width: 100rpx;
				margin-bottom: 20rpx;
			}

			.txt {
				font-size: 28rpx;
			}
		}
	}

	.handle-close {
		display: flex;
		justify-content: center;
		margin-bottom: 50rpx;
	}
</style>